<template>
	<section class="vbox">
		<section class="scrollable">
			<el-row :gutter="10">
			  <el-col :xs="12" :sm="6" :md="4" :lg="3" :xl="3" v-for="(item, index) in mediaList" :key="index">
				  <div class="grid-content bg-purple">
					<div class="grid-item">
						<img :src="$api.file.url.view + item.code" fit="cover" :alt="item.fileName + ' | 回归自性 | 中国'" lazy scroll-container="#masonry" />
						<h2>{{ item.fileName }}</h2>
					</div>
				  </div>
				  </el-col>
			</el-row>
		</section>
	</section>
</template>
<script>
	// import Tiles from '../../static/js/masonry/tiles.min.js'
	// import '../../static/js/masonry/demo.js'

	export default {
		data() {
			return {
				mediaList: [],
				pageNo: 1,
				total: 0,
				data: null

			}
		},
		mounted() {
			// var $grid = $('#masonry').masonry({
			// // options...
			// });
			// // layout Masonry after each image loads
			// $grid.imagesLoaded().progress(function() {
			// $grid.masonry('layout');
			// });


			this.$api.file.list({
				// 				name: this.keywords,
				// 				mediaType: this.mediaType_q,
				// 				publish: this.publish_q,
				// 				pageSize: this.pageSize,
				// 				pageNo: this.pageNo
			}).then(data => {
				this.mediaList = data;
				// this.mediaList = data.rows;
				// 				this.pageNo = data.pageNo;
				// 				if (1 == this.pageNo) {
				// 					this.total = data.total;
				// 				}
			});
			// 			var msnry = new Masonry('#masonry', {
			// 				columnWidth: 225,
			// 				itemSelector: '.grid-item'
			// 			});
		}
	}
</script>

<style scoped>
</style>
